<template>
    <el-container>
    <el-header style="background-color: #42b983;display: flex;">
        <div style="width: 100px;margin-top: 10px" >
            <el-avatar size="70" :src="require('@/assets/img/'+avatar+'')"></el-avatar>
        </div>

        <div style="margin-top: 20px;font-size: larger;margin-right:10px">{{account}}</div>
        <div    style="width: 100%">
            <el-menu
                    :default-active="activeIndex2"
                    class="el-menu-demo"
                    mode="horizontal"
                    @select="handleSelect"
                    background-color="#545c64"
                    text-color="#fff"
                    active-text-color="#ffd04b"
                    :router="true">
                <el-menu-item index="1" route="index">首页</el-menu-item>
                <el-menu-item index="2" route="userPetStorageRequest">寄养宠物</el-menu-item>
                <el-menu-item index="3" route="userUpdate">修改个人信息</el-menu-item>
            </el-menu>
        </div>


    </el-header>

    <el-main style="background: #e0eee8">

        <el-form :model="newUser"  :rules="rules" ref="newUser"  label-width="100px" class="demo-ruleForm">

            <el-form-item label="名字"  prop="uname">
                <el-input v-model="newUser.uname"></el-input>
            </el-form-item>
            <el-form-item label="密码"   prop="upwd">
                <el-input v-model="newUser.upwd"></el-input>
            </el-form-item>
            <el-form-item label="年龄"   prop="age">
                <el-input v-model="newUser.age"></el-input>
            </el-form-item>
            <el-form-item label="电话" prop="phone">
                <el-input v-model="newUser.phone"></el-input>
            </el-form-item>
            <el-form-item label="邮箱" prop="email">
                <el-input v-model="newUser.email"></el-input>
            </el-form-item>
            <!--图片上传-->
            <el-form-item label="照片">
                <el-upload
                        class="avatar-uploader"
                        action="http://localhost:8081/user/upload"
                        :before-upload="before"
                        :show-file-list="false"
                        :on-success="handleAvatarSuccess"
                        :with-credentials="true">
                    <img v-if="newUser.avatar" :src="require('@/assets/img/'+newUser.avatar+'')" class="avatar"/>
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>

            </el-form-item>

            <el-form-item  >
                <el-button v-on:click="modify()">修改</el-button>
            </el-form-item>

        </el-form>

    </el-main>
    </el-container>
</template>

<script>
    export default {
        name: "UserUpdate",
        data(){
            var  validateUpwd=(rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请输入密码'));
                } else {
                    if (this.newUser.checkPass !== '') {
                        this.$refs.newUser.validateField('checkPass');
                    }
                    callback();
                }
            };
            var validateUpwd2 = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请再次输入密码'));
                } else if (value !== this.newUser.upwd) {
                    callback(new Error('两次输入密码不一致!'));
                } else {
                    callback();
                }
            };
            var checkAge = (rule, value, callback) => {
                if (!value) {
                    return callback(new Error('年龄不能为空'));
                }

            };


            return{
                account: '',
                userId: '',
                avatar:"",
                newUser:{
                    uname:"",
                    upwd:"",
                    age:"",
                    phone:"",
                    email:"",
                   avatar:"",
                },
             rules: {
                 uname: [
                     {required: true, message: '请输入用户名', trigger: 'blur'},
                     {min: 3, max:8, message: '长度在 3 到 8个字符', trigger: 'blur'}
                 ],
                     upwd:[
                     { validator: validateUpwd, trigger: 'blur' },
                     {required: true, message: '请输入密码', trigger: 'blur'},
                     {min: 6, max: 10, message: '长度在 6 到 10 个字符', trigger: 'blur'}
                 ],

                     age: [
                     { validator: checkAge, trigger: 'blur' },
                 ],
                     phone: [
                     {min: 11, max: 11, message: '长度11 个字符', trigger: 'blur'}
                 ]
             }


            }
        },
        mounted() {
            // 从sessionStore中获取数据
            this.userId=sessionStorage.getItem("userId");
            this.account=sessionStorage.getItem("account");
            this.avatar = sessionStorage.getItem("avatar");
            console.log("修改用户信息  钩子函数"+this.userId)
            this.$http.get("http://localhost:8081/user/findUserById?id="+this.userId+"&status="+0+"").then(req => {
                //给data中的tableDat赋值
                this.newUser = req.data[0];
                console.log(this.newUser)
                console.log(this.newUser.avatar)
            })
        },
        methods:{
            handleAvatarSuccess(res, file) {
                this.newUser.avatar= file.name;//从后台获取filename给path赋值
            },
            modify(){
                console.log(this.newUser)

                this.$http.get("http://localhost:8081/user/updateUser?id="+this.newUser.id+"&uname="+this.newUser.uname+"&upwd="+this.newUser.upwd+"&age="+this.newUser.age+"&phone="+this.newUser.phone+"&email="+this.newUser.email+"&avatar="+this.newUser.avatar+"").then(req => {
                    //给data中的tableDat赋值
                    if(req.data){
                        alert("修改成功")
                         sessionStorage.setItem("avatar",this.newUser.avatar)
                        this.$router.push('index')
                    }
                })


            }
        }
    }


</script>

<style scoped>

</style>